<template>
	<div class="cart">
		<div class="top">
			<h2>购物车</h2>
			<span>编辑</span>
		</div>
		<div class="section">
			<div class="shopName"><input type="checkbox"  v-model="check" value='checkCurrentAll'/> 新华都超市</div>
			<ul class="shopGoods">
				<li class="clearfix shopGoodsLi"> 
					<div class="left">
						<input type="checkbox"  v-model="check" value="1"/><img src="https://img.alicdn.com/imgextra/i1/59857264/TB2ItmtdaigSKJjSsppXXabnpXa_!!0-saturn_solar.jpg_220x220.jpg"  align="absmiddle"/>
					</div>
					<div class="right relative">
						<p class="firstP">Apple iphone 1plus 128G 红色特别版 移动联通电信4G手机</p>
						<p><span class='opacity'>重量:0.39kg</span> <span class="positionRight opacity">修改</span></p>
						<p class="lastP"><span class="money">￥57900</span ><span class="positionRight"><a>-</a><a>1</a><a>+</a></span> </p>
					</div>
				</li>
				<li class="clearfix shopGoodsLi"> 
					<div class="left">
						<input type="checkbox"  v-model="check" value="1"/><img src="https://img.alicdn.com/imgextra/i1/59857264/TB2ItmtdaigSKJjSsppXXabnpXa_!!0-saturn_solar.jpg_220x220.jpg"  align="absmiddle"/>
					</div>
					<div class="right relative">
						<p class="firstP">Apple iphone 1plus 128G 红色特别版 移动联通电信4G手机</p>
						<p><span class='opacity'>重量:0.39kg</span> <span class="positionRight opacity">修改</span></p>
						<p class="lastP"><span class="money">￥57900</span ><span class="positionRight"><a>-</a><a>1</a><a>+</a></span> </p>
					</div>
				</li>
				<li class="clearfix shopGoodsLi"> 
					<div class="left">
						<input type="checkbox"  v-model="check" value="1"/><img src="https://img.alicdn.com/imgextra/i1/59857264/TB2ItmtdaigSKJjSsppXXabnpXa_!!0-saturn_solar.jpg_220x220.jpg"  align="absmiddle"/>
					</div>
					<div class="right relative">
						<p class="firstP">Apple iphone 1plus 128G 红色特别版 移动联通电信4G手机</p>
						<p><span class='opacity'>重量:0.39kg</span> <span class="positionRight opacity">修改</span></p>
						<p class="lastP"><span class="money">￥57900</span ><span class="positionRight"><a>-</a><a>1</a><a>+</a></span> </p>
					</div>
				</li>
				<li class="clearfix shopGoodsLi"> 
					<div class="left">
						<input type="checkbox"  v-model="check" value="1"/><img src="https://img.alicdn.com/imgextra/i1/59857264/TB2ItmtdaigSKJjSsppXXabnpXa_!!0-saturn_solar.jpg_220x220.jpg"  align="absmiddle"/>
					</div>
					<div class="right relative">
						<p class="firstP">Apple iphone 1plus 128G 红色特别版 移动联通电信4G手机</p>
						<p><span class='opacity'>重量:0.39kg</span> <span class="positionRight opacity">修改</span></p>
						<p class="lastP"><span class="money">￥57900</span ><span class="positionRight"><a>-</a><a>1</a><a>+</a></span> </p>
					</div>
				</li>
			</ul>
		</div>
		<div class="bottom"></div>
	</div>
	
</template>

<script>


	export default {
		components: {

		},
		data() {
			return {
				check:[]
			}

		},
		methods:{
			
		}
	
	}
</script>

<style scoped>
 .cart{width: 100%;height: 38rem; background:#F0F0F0; overflow: hidden; }
 .cart .top{width: 100%;height: 3rem; position: relative;margin-bottom: 0.6rem; background: white;line-height: 3rem; box-shadow: 0 1px 1px grey; }
 .cart .top h2{text-align: center;font-weight: normal;font-size: 1.2rem;}
 .cart .top span{position: absolute; right: 2rem;top: 50%; transform: translate(0,-50%);opacity: 0.4;}

 .shopName{width: 100%; font-size: 0.9rem; height: 2.5rem;line-height: 2.5rem;padding-left: 3.5%; background: #FAFAFA;}
 .shopGoods{width: 100%;height: auto;}
 .shopGoods li{width: 100%; height: 6rem; background: white;}
 .shopGoods .left{width: 35%;height: 100%;float: left;}
 .shopGoods .right{padding-left: 2%; width: 63%;height: 100%;font-size: 0.8rem; float: left;}
 .shopGoods .right a{padding:1px 8px; border: 1px solid gainsboro;}
 .shopGoods .left input{margin-left: 10%;}
 .shopGoods .left img{height: 6rem;margin-left: 5%}
 .clearfix{display: block; clear: both;content: '';}
 .relative{position: relative;}
 .positionRight{position: absolute; right: 2%;}
 .opacity{opacity: 0.4;}
 .money{color: orangered; font-size: 1.2rem;}
 .lastP{line-height: 1.2rem;margin-top: 0.5rem;}
 .firstP{ padding-right: 1.7rem;}
 .shopGoodsLi{padding: 0.5rem 0;}
</style>